<template>
  <el-dialog
    title="添加马甲"
    :visible.sync="addDialogData.isShow"
    width="600px"
    :before-close="labelHandleClose"
  >
    <div class="form-box">
      <!-- 表单部分 -->
      <el-form
        ref="form"
        :model="form"
        label-position="right"
        label-width="100px"
        :rules="formRules"
      >
        <el-form-item label="手机号:" prop="robotMobile">
          <el-input
            clearable
            v-model="form.robotMobile"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称:" prop="robotNickName">
          <template>
            <el-input
              clearable
              v-model="form.robotNickName"
              placeholder="请输入马甲昵称"
            ></el-input>
            <div style="font-size:12px">
              注：12个字符之内,不能为纯数字或纯字母;不能以dp字母开头;不包含特殊符号
            </div>
          </template>
        </el-form-item>
        <el-form-item label="马甲等级" prop="robotGrade">
          <span>D</span>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="cancelLabel">取 消</el-button>
      <el-button type="success" :loading="loading" @click="confirmLabel('form')"
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { addSubForm } from '@/api/vestManagement/vestManage' // 接口
import { validateSpecial } from '@utils/validate'
export default {
  props: ['addDialogData'],
  data() {
    //校验昵称
    var valiName = (rule, value, callback) => {
      var isletter = /^[a-zA-Z]+$/.test(value)
      if (isletter) {
        callback(new Error('昵称不能为纯字母'))
      }
      var patrn = /^[0-9]*$/
      if (patrn.test(value)) {
        callback(new Error('昵称不能为纯数字'))
      }
      var length_ = value.length
      if (length_ > 12 || length_ < 2) {
        callback(new Error('昵称需2-12位'))
      }
      var str = value.substr(0, 2)
      if ('dp' == str) {
        callback(new Error('昵称不能以dp开头'))
      }
      if (!validateSpecial(value)) {
        callback(new Error('昵称不能包含特殊字符'))
      }
      callback()
    }
    return {
      loading: false,
      // 表单数据
      form: {
        robotMobile: '', // 手机号
        robotNickName: '', // 昵称
        robotGrade: ''
      },
      formRules: {
        robotMobile: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          {
            pattern: /^175\d{8}$/,
            message: '请输入175开头的11位手机号码',
            trigger: 'blur'
          }
        ],
        robotNickName: [
          { required: true, message: '昵称不能为空', trigger: 'blur' },
          { validator: valiName, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    // 对话框关闭 清空数据
    cancelLabel() {
      if (this.form.robotMobile || this.form.robotNickName) {
        this.$confirm('已有信息填入，确定要放弃添加马甲？', '提示', {
          confirmButtonText: '继续添加',
          cancelButtonText: '放弃添加',
          type: 'warning'
        })
          .then(() => {
            this.addDialogData.isShow = true
          })
          .catch(() => {
            this.loading = false
            this.addDialogData.isShow = false
          })
      } else {
        this.loading = false
        this.addDialogData.isShow = false
      }
    },
    labelHandleClose(done) {
      this.cancelLabel()
    },
    //
    /* 确认提交 */
    confirmLabel(formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.subForm()
        } else {
          return false
        }
      })
    },
    /* 提交表单 */
    subForm() {
      this.loading = false
      let obj = { ...this.form }
      addSubForm(
        obj,
        (response) => {
          this.loading = false
          this.$emit('refresh')
          this.addDialogData.isShow = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
// .el-dialog {
// }
</style>
